<template>
  <div class="home">
    <!-- 路由导航 -->
    <div id="nav">
      <span class="logo" @click="$router.push('/StudentManage')"
        ><img src="../assets/images/logo/logo.png" alt="" class="logo-pic"
      /></span>
      <router-link to="/StudentManage">学生管理</router-link>
      <router-link to="/Exercises">习题管理</router-link>
      <router-link to="/TodayWork">今日作业</router-link>
      <router-link to="/CheckWork">查看作业</router-link>
      <router-link to="/Login" v-if="!isUser">登录</router-link>
      <span class="avatar" @mouseenter="handleEnter" v-if="isUser">
        <img :src="userInfo.image" v-if="userInfo.image" class="avatar-pic" />
        <img src="@/assets/images/img/jzz.png" v-else class="avatar-pic" />
        <span
          class="logout"
          v-if="enterFlag"
          @mouseleave="handleLeave"
          @click="logOut"
          >退出</span
        >
      </span>
    </div>
    <!-- banner区域 -->
    <div class="banner">
      <!-- <Swiper></Swiper> -->
      <Swiper2></Swiper2>
    </div>
    <!-- 路由占位符 -->
    <router-view></router-view>

    <!-- 底部组件 -->
    <Footer></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
// import Swiper from './Swiper'
import Swiper2 from './Swiper2'
import Footer from './Footer/index'
import userUtils from "@/utils/userUtil";
export default {
  name: 'home',
  components: {
    // Swiper,
    Footer,
    Swiper2
  },
  data () {
    return {
      userInfo: {},
      enterFlag: false,
      userFlag: false,
      isUser: userUtils.get()
    }
  },
  watch: {
    isUser: {
      handler () {
        this.isUser = userUtils.get()
      }
    }
  },

  created () {
    console.log(this.userInfo);
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    // console.log(this.userInfo);
    // this.isLogin = JSON.parse(sessionStorage.getItem('userInfo'))
    // console.log(JSON.parse(this.isLogin));

  },
  methods: {
    getM(e){
      console.log(e);
    },
    // 退出登录
    logOut () {
      sessionStorage.removeItem('userInfo')
      this.$router.go(0)
    },
    handleEnter () {
      this.enterFlag = true
    },
    handleLeave () {
      this.enterFlag = false
    }
  }
}
</script>

<style lang="less" scoped>
#nav {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.625rem;
  box-shadow: 0px 1px 1px #eee;
  a {
    font-family: "PingFang SC", "Hiragino Sans GB", "Segoe UI",
      "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
      "Chinese Quote", -apple-system, BlinkMacSystemFont;
    color: #333;
    text-decoration: none;
    margin-right: 2.5rem;
    display: inline-block;
    height: 100%;
    &.router-link-exact-active {
      border-top: 0.1875rem solid #ff5342;
      color: #ff5342;
    }
    &.router-link-active {
      border-top: 0.1875rem solid #ff5342;
    }
  }
  .logo {
    display: inline-block;
    height: 100%;
    cursor: pointer;
    margin: 0 50px;
    .logo-pic {
      vertical-align: middle;
    }
  }
}
.banner {
  // height: 12.5rem;
  background-color: #009966;
  margin-top: 3px;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.375rem;
  background-color: #eee;
  cursor: pointer;
  margin-bottom: 0.6125rem;
  position: relative;
  .avatar-pic {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-block;
  }
  .logout {
    position: absolute;
    bottom: -70px;
    left: -20px;
    width: 80px;
    height: 60px;
    line-height: 60px;
    z-index: 999;
    font-size: 20px;
    background-color: #fff;
  }
  :hover {
    color: #ff5342;
  }
}
</style>
